import {Component} from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import * as todoActions from '../store/actions/todo.actions'

class Footer extends Component{
  clearTodos() {
    if(window.confirm('确认删除已完成任务？')){
      console.log('删除已完成任务')
      this.props.clear_todo_completed()
    }
	}
  render() {
    let finished = this.props.todos.filter(todo => ! todo.isCompleted).length
    return (
			<footer className="footer">
				{/* <!-- 未完成任务数量 --> */}
				<span className="todo-count">
					<strong>{finished}</strong> item left
				</span>
				{/* <!-- 任务状态筛选 --> */}
				<ul className="filters">
					<li>
						<span onClick={()=> {this.props.filter_todo('all')}}>All</span>
					</li>
					<li>
						<span onClick={()=> {this.props.filter_todo('active')}}>Active</span>
					</li>
					<li>
						<span onClick={()=> {this.props.filter_todo('completed')}}>Completed</span>
					</li>
				</ul>
				{/* <!-- 如果没有已完成任务 隐藏下面的button按钮 --> */}
				<button className="clear-completed" onClick={() => this.clearTodos()}>Clear completed</button>
			</footer>
    )
  }
}

const mapStateToProps = (state) => ({
  todos: state.todoReducer.todos,
  filter: state.todoReducer.filter
})

const mapDispatchToProps = (dispatch) => ({
  ...bindActionCreators(todoActions, dispatch)
})

export default connect(mapStateToProps,mapDispatchToProps)(Footer)